<!-- 
All rights Reserved, Designed By www.youyacao.com 
@Description:我发布的作品【视频】
@author:成都市一颗优雅草科技有限公司     
@version V3.7 
注意：本前端源码遵循 MulanPSL-2.0开源协议（木兰宽松许可证）本内容仅限于个人参考，禁止用于其他的商业用途
需要商业用途或者定制开发等可访问songshu.youyacao.com   联系QQ:422108995 23625059584

 -->


<template>
	<view>
		<refresh ref="refresh" @isRefresh="isRefresh"></refresh>
		<view class="head">
			<view class="left-wrapper" @click="back">
				<uni-icons color="#000000" class="back" size="30" type="arrowleft" />
			</view>
			<view class="search-wrapper">
				<view>我的作品</view>
			</view>
			<view class="right-wrapper" @click="rightClick">
				<image v-if="selectedIds.length==0"  :src="selected?'/static/icon/icon_duoxuan_active.png':'/static/icon/icon_duoxuan.png'" mode="widthFix" ></image>
				<uni-icons v-if="selectedIds.length>0" color="#fe1f7b" class="back" size="30" type="trash" />
			</view>
		</view>
		<view class="content" @touchstart="refreshStart"
				 @touchmove="refreshMove" @touchend="refreshEnd">
				<checkbox-group @change="checkboxChange"  class="video-list-wrapper">
					<view class="video-list-item" v-for="(item,index) in items" :key="index" @tap="clickItem(index)">
						<image :src="formatUrl(item.img,3)" mode="aspectFill"></image>
						<view class="list-skr-wrapper"> 
							<image src="/static/home/heart.png" mode="widthFix"></image>
							<text>{{item.skr_count}}</text> 
						</view>
						<checkbox style="transform:scale(0.7)" v-show="selected" color="#FFFFFF" :value="item.id" :checked="item.checked" />
					</view>
				</checkbox-group>
				<view :style="{'textAlign':'center'}" class="loading">
					<text v-if="!isMore">暂无更多数据</text>
					<text v-if="isMore">正在加载...</text>
				</view>
		</view>
		
	</view>
</template>

<script>
	
	import refresh from '@/components/refresh/refresh.vue';
	import uniIcons from "@/components/uni-icons/uni-icons.vue";
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	export default {
		components: {
			uniIcons,
			uniPopup,
			refresh
		},
		data() {
			return {
				selected:false,
				show: false,
				popTitle: '',
				popPlaceholder: '',
				type: '',
				content: "",
				items: [], 
				page:1,
				isMore:true,
				loadmore:false,
				selectedIds:[]
			}
		},
		created() {
			this.loadData()
		},
		computed: {
			user() {
				return this.$store.state.user;
			}
		},
		onReachBottom(){
			this.loadMore();
		},
		methods: {
			loadMore() {
				if (this.isMore) { 
					this.loadmore = true;
					// 初始化视频列表
					this.$api.videoList({
						'type': 'user',
						'page': ++this.page
					}).then(res => {
						this.$refs.refresh.endAfter() //刷新结束调用
						if (res.data.code == 0) {
							this.items = this.items.concat(res.data.data);
			
						} else {
							this.isMore = false;
						}
						this.loadmore = false;
					}).catch(res => {
						this.isMore = false;
						this.loadmore = false;
						this.$refs.refresh.endAfter() //刷新结束调用
						// 失败进行的操作
					})
				} else {
					this.loadmore = true;
					uni.showToast({
						title: '暂无更多数据'
					});
				}
			
			},
			refresh(){
				this.loadData();
			},
			isRefresh() {
				this.refresh();
			},
			refreshStart(e) {
				this.$refs.refresh.refreshStart(e);
			},
			refreshMove(e) {
				this.$refs.refresh.refreshMove(e);
			},
			refreshEnd(e) {
				this.$refs.refresh.refreshEnd(e);
			},
			rightClick(){
				if(this.selectedIds.length>0){
					this.deleteVideo();
					return;
				}
				this.selected=!this.selected;
				
			},
			deleteVideo(){
				this.$api.videoDelete({ids:this.selectedIds}).then((res)=>{
					if(res.data.code==1){
						uni.showToast({
							title: res.data.msg,
							icon: 'none'
						});
						return;
					}
					uni.showToast({
						title: '删除成功',
					});
					
					this.loadData();
				})
			},
			toPlay(index) {
			
				this.$store.commit("setVideoList", this.items.slice(index, this.items.length));
			
				uni.navigateTo({
					url: '/pages/video/index?index=0' + '&type=' +
						this.type + '&page=' + this.page,
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			clickItem(index){
				if(this.selected){
					if(this.items[index].checked){
						this.selectedIds.remove(this.items[index].id)
					}else{
						this.selectedIds.push(this.items[index].id)
					}
					this.$set(this.items[index],'checked',!this.items[index].checked)
					return;
				}
				this.toPlay(index)
			},
			formatUrl(url, scale) {
				if (!scale) {
					scale = 1;
				}
				if (url == undefined) {
					return "";
				}
				var index = url.indexOf("http");
				if (index == 0) {
					return url;
				}
				return this.$store.state.baseUrl + "/thumb/" + scale + "?url=" + url;
			},
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			loadData() {
				uni.showLoading({
					title: '加载中',
					mask: true
				});
				this.selectedIds=[];
				this.selected=false;
				this.isMore=true;
				this.page=1;
				//获取视频信息
				this.$api.videoList({
					type: 'user',
					page: this.page
				}).then((res) => {
					this.loadmore=false
					uni.hideLoading()
					this.$refs.refresh.endAfter() //刷新结束调用
					if (res.data.code == 1) {
						
						return;
					}
					this.items = res.data.data;
					console.log("length:",res.data.data.length);
					if(res.data.data.length<20){
						this.isMore=false;
					}
				
				}).catch(res=>{
					this.isMore=false;
					uni.hideLoading()
					this.$refs.refresh.endAfter() //刷新结束调用
				})
			},
			checkboxChange(e) {
				var items = this.items,
					id = e.detail.id;
				for (var i = 0, lenI = items.length; i < lenI; ++i) {
					const item = items[i]
					if (id===item.id) {
						this.$set(item, 'checked', true)
					} else {
						this.$set(item, 'checked', false)
					}
				}
			}

		}
	}
</script>

<style lang="scss">
	page {
		height: 100%;
		width: 100%;
		background: $uni-bg-color-content;
	}

	.head {

		align-items: center;
		position: fixed;
		//#ifdef APP-PLUS
		padding-top: 44rpx;
		//#endif
		z-index: 1;
		left: 0;
		right: 0;
		background: $uni-bg-color;
		width: 100%;
		display: flex;
		flex-direction: row;
		height: 88rpx;
		box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.12);
		// background-color: red;
	}

	.left-wrapper {
		margin-left: 12rpx;
		height: 88rpx;
		line-height: 88rpx;
		flex-direction: row;
		// background: #007AFF;
		justify-content: center;
		flex: 1;
	}

	.right-wrapper {
		height: 88rpx;
		line-height: 88rpx;
		flex-direction: row;
		// background: #007AFF;
		justify-content: center;
		flex: 1;
		

		image {
			margin-right: 24rpx;
			display: inline-block;
			width: 35rpx;
			height: 35rpx;
		}
	}

	.search-wrapper {
		text-align: center;
		line-height: 76rpx;
		height: 76rpx;
		// background: #09BB07;
		flex: 10;
		flex-direction: row;
		align-items: center;
		align-content: center;
		justify-content: center;

		text {
			line-height: 76rpx;
			height: 76rpx;
		}
	}

	.search {
		height: 88rpx;
		
		line-height: 88rpx;
		flex: 1;
	}

	.content {

		height: 800rpx;
		display: flex;
		flex-direction: column;
		position: relative;
		padding-top: 88rpx;
		padding-bottom: 123rpx;
		//#ifdef APP-PLUS
		padding-top: 128rpx;
		//#endif
		height: 100%;
		width: 100vw;
	}
	.video-list-wrapper{
		padding-top: 24rpx;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		width: 96.8%;
		padding-left: 24rpx;
		margin-right: -24rpx;
	}
	.video-list-item{
		width: 30vw;
		height: 304rpx;
		position: relative;
		margin-bottom: 12rpx;
		margin-right: 12rpx;
		image{
			background: white;
			border-radius:8rpx;
			width: 100%;
			height: 304rpx;
		}
		.wx-checkbox-input{
			border-radius: 50%;
			border: none;
			
		}
		.wx-checkbox-input-checked{
			background:rgba(254,31,123,1);
			border-radius:50%;
			
		}
		checkbox{
			width: 24rpx;
			height: 24rpx;
			border-radius: 50%;
			position: absolute;
			right: 24rpx;
			bottom: 32rpx;
			 
		}
	}
	.list-skr-wrapper{
		position: absolute;
		bottom: 24rpx;
		left: 24rpx;
		z-index: 1;
		display: flex;
		flex-direction: row;
		align-items: center;
		image{
			background: none;
			width:24rpx;
			height:24rpx;
		}
		text{
			margin-left: 12rpx;
			font-size:20rpx;
			font-family:PingFang SC;
			font-weight:400;
			color:rgba(255,255,255,1);
			line-height:10rpx;
		}
	}
	
</style>
